<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i>查看抽奖详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div >
                <div class="details"> 
                    <label>抽奖商品：<span class="span-right" v-for="activity in activityData.prizes" :key="activity.id">{{activity.prizeName}}</span></label>
                    <label>数量：<span class="span-right" v-for="activity in activityData.prizes" :key="activity.id">{{activity.count}}</span></label> 
                    <label><span>赞助商：{{activityData.prizeProvider}}</span></label>
                    <label><span>开奖时间：{{activityData.drawTime}}</span></label>
                    <label><span>参与人数：{{activityData.joinNum}}</span></label>
                </div>
                <div class="details">状态：<span v-if="activityData.status == 1">未开奖</span><span v-else-if="activityData.status == 2">已开奖</span><span v-else>失效</span></div>
                <div class="details-img">
                    抽奖图片：
                    <img :src="activityData.activityPrizeImgUrl" alt="" class="">
                </div>
                <div class="introduce">
                    <div class="introduce-text">奖品介绍：</div>
                    <div id="editorElem"></div>
                   
                </div>
                <div class="details">中奖名单：{{activityData.wonCount}}</div>
            </div>
            <el-form  :model="form" :rules="rules"  ref="form">
                <el-table :data="addressData" border style="width: 100%"  ref="multipleTable">
                   
                    <el-table-column prop="nickName" label="用户名"  align="center" :formatter="nickName">
                    </el-table-column>
                    <el-table-column prop="consignee" label="收货人" align="center" :formatter="consignee">
                    </el-table-column>
                    <el-table-column prop="phone" label="收货人电话" align="center" :formatter="phone">
                    </el-table-column>
                    <el-table-column prop="userAddress" label="收货人地址" align="center" :formatter="userAddress">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center" :formatter="remark">
                    </el-table-column>
                    <el-table-column   label="输入快递公司" align="center">
                        <template slot-scope="scope" >
                            <el-form-item v-if="!scope.row.expCompany">
                                <el-input type="text"  class="handle-input" v-model="scope.row.expCompany1"></el-input>
                            </el-form-item>
                            <div v-else>
                                {{scope.row.expCompany}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column  label="输入快递单号" align="center">
                        <template slot-scope="scope">
                            <el-form-item v-if="!scope.row.expNum">
                                <el-input type="text"  class="handle-input"  v-model="scope.row.expNum1"></el-input>
                            </el-form-item>
                            <div v-else>
                                {{scope.row.expNum}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="确认发货" width="180" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.shipStatus != 1" size="mini" @click="submit(scope.row)" type="primary">确定</el-button>
                            <el-button v-else size="mini"  disabled>已确定</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import axios from 'axios';
import E from 'wangeditor';
import { getDetails,getAddress,deliverGoods } from '../../components/api/LuckDraw.js';
    export default {
        name: 'luckDrawDetails',
        data() {
            return {
                userId:JSON.parse(localStorage.getItem('sysUser')),
                activityData:[],
                addressData:[],
                form:{
                    expNum:'',
                    expCompany:''
                },
                rules:{
                    expCompany1: [
                        { required:true, message:'请填写快递公司' , trigger: 'blur' }
                    ],
                    expNum1:[
                        {required:true,message:'请填写快递单号',trigger:'blur'}
                    ]
                    

                }
            }
        },   
        created(){
            
            this.getActivityDetails();
        },
        methods: { 
            ajax1(){
                 let params = {
                    activityId:this.$route.params.id,
                    userId:this.userId.id
                }
               return getDetails(params);
            },

            ajax2(){
                let params = {
                    pageNum:1,
                    pageSize:10,
                    activityId:this.$route.params.id,
                    userId:this.userId.id
                }
                return  getAddress(params);
            },

            //获取中奖详情和抽奖收货地址信息
             getActivityDetails(){
                 let that = this;
                 axios.all([this.ajax1(),this.ajax2()]).then(axios.spread(function(details, address){
                     if(details.status == 200 && address.status == 200){
                         that.activityData = details.data;
                         
                         let listData = address.data.list;
                         for(let i=0,len = listData.length;i<len;i++){
                             listData[i].expNum1 = '';
                             listData[i].expCompany1 = '';
                         }
                         console.log(address.data.list);
                         console.log('---------------------');
                         that.addressData = address.data.list;

                        let editor = new E('#editorElem');
                        editor.customConfig.zIndex = 1;    //防止富文本编辑器被别的内容所覆盖     
                        editor.create();
                        editor.$textElem.attr('contenteditable', false);
                        editor.txt.html(that.activityData.providerInformation);


                     }
                     
                 })).catch((err)=>{
                     console.log(err);
                     Message({
                         message:err.msg,
                         type:'warning'
                     });
                 });
               
             },

             remark(row){
                 if(!row.remark){
                     return '暂无'
                 }else{
                     return row.remark
                 }
             },
             userAddress(row){
                 if(!row.userAddress){
                     return '暂无'
                 }else{
                     return row.userAddress
                 }
             },
             phone(row){
                 if(!row.phone){
                     return '暂无'
                 }else{
                     return row.phone
                 }
             },
             consignee(row){
                 if(!row.consignee){
                     return '暂无'
                 }else{
                     return row.consignee
                 }
             },
             nickName(row){
                 let Base64 = require('js-base64').Base64;
                 if(!row.nickName){
                     return '暂无'
                 }else{
                    return Base64.decode(row.nickName);
                 }
             },
             submit(row){
                 
                 let expNumInput = row.expNum1;
                 let expCompanyInput = row.expCompany1;
                let rows = row;

                 if(expCompanyInput == ''){
                    Message({
                        message:'请填写快递公司',
                        type:'warning'
                    });
                 }else if(expNumInput == ''){
                     Message({
                        message:'请填写快递单号',
                        type:'warning'
                    });
                 }

                
                var params = {
                    activityId:this.$route.params.id,
                    userId:row.userId,
                    expNum:expNumInput,
                    expCompany:expCompanyInput
                }        

                //发货
                deliverGoods(params).then((res)=>{
                    if(res.status == 200){                       
                        Message({
                            message:'发货成功',
                            type:'success',
                            onClose:function(){
                                rows.expCompany = expCompanyInput;
                                rows.expNum = expNumInput;
                                rows.shipStatus = 1;
                            }
                        });
                        
                    }
                }).catch((err)=>{
                    Message.error(err.msg);
                    console.log(err);
                });

             }
        }
    }

</script>

<style scoped>
   .details{
       height:50px;
       line-height: 50px;
   }
   .details>label{
       margin-right:70px;
   }
   .details .span-right{
       margin-right:20px;
   }
   .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
       margin-bottom:0px;
   }
   .introduce{
       margin:20px 0;
   }
   .introduce-text{
       margin-bottom:10px;
   }
   .details-img{
       height:100px;
   }
   .details-img>img{
       width:140px;
       height:100px;
       vertical-align: middle;
   }
</style>
